<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日30首 - QQ音乐</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div class="app-container playlist-page">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="time">17:11</div>
            <div class="status-icons">
                <i class="fas fa-bell-slash"></i>
                <i class="fab fa-bluetooth-b"></i>
                <i class="fas fa-wifi"></i>
                <span class="network-signal">x</span>
                <div class="battery">
                    <span>100</span>
                    <i class="fas fa-bolt"></i>
                </div>
            </div>
        </div>

        <!-- 头部导航 -->
        <div class="header">
            <div class="back-button">
                <i class="fas fa-arrow-left"></i>
            </div>
            <div class="more-options">
                <i class="fas fa-ellipsis-v"></i>
            </div>
        </div>

        <!-- 歌单信息 -->
        <div class="playlist-info">
            <div class="playlist-title-container">
                <div class="playlist-ai-tag">
                    <span>AI歌单</span>
                    <span class="update-info">· 每日更新</span>
                </div>
                <h1 class="playlist-title">每日30首</h1>
                <div class="playlist-cover">
                    <img src="images/album-cover-large.svg" alt="林俊杰">
                </div>
            </div>

            <!-- 歌单描述 -->
            <div class="playlist-description">
                <p>甄选私人好品味: 今日份的林俊杰、银临、闻人听书等歌手一定值得你的期待</p>
            </div>

            <!-- 操作栏 -->
            <div class="action-bar">
                <div class="action-button">
                    <i class="far fa-heart"></i>
                    <span>收藏</span>
                </div>
                <div class="action-button">
                    <i class="fas fa-share-alt"></i>
                    <span>分享</span>
                </div>
            </div>

            <!-- VIP提示 -->
            <div class="vip-info">
                <div class="vip-icon">
                    <i class="fas fa-bolt"></i>
                </div>
                <span>含14首VIP歌曲 会员可无限畅享</span>
                <div class="vip-button">
                    优惠开通 <i class="fas fa-chevron-right"></i>
                </div>
            </div>
        </div>

        <!-- 播放控制区 -->
        <div class="play-controls">
            <div class="play-all-button">
                <i class="fas fa-play"></i>
                <span>全部播放</span>
                <span class="song-count">30</span>
            </div>
            <div class="control-icons">
                <i class="fas fa-download"></i>
                <i class="fas fa-list-ul"></i>
            </div>
        </div>

        <!-- 歌曲列表 -->
        <div class="song-list-container">
            <div class="song-item">
                <div class="song-index">1</div>
                <div class="song-info">
                    <div class="song-title">手心的蔷薇</div>
                    <div class="song-artist">林俊杰/G.E.M. 邓紫棋 <span class="vip-badge">VIP</span> <span class="quality-badge">臻品母带</span></div>
                </div>
                <div class="song-actions">
                    <i class="far fa-heart"></i>
                    <i class="fas fa-play"></i>
                    <i class="fas fa-ellipsis-v"></i>
                </div>
            </div>

            <div class="song-item">
                <div class="song-index">2</div>
                <div class="song-info">
                    <div class="song-title">像晴天像雨天</div>
                    <div class="song-artist">汪苏泷 <span class="quality-badge">臻品母带</span></div>
                </div>
                <div class="song-actions">
                    <i class="far fa-heart"></i>
                    <i class="fas fa-play"></i>
                    <i class="fas fa-ellipsis-v"></i>
                </div>
            </div>

            <div class="song-item">
                <div class="song-index">3</div>
                <div class="song-info">
                    <div class="song-title">牵丝戏</div>
                    <div class="song-artist">银临/Aki阿杰 <span class="quality-badge">臻品母带</span></div>
                </div>
                <div class="song-actions">
                    <i class="far fa-heart"></i>
                    <i class="fas fa-play"></i>
                    <i class="fas fa-ellipsis-v"></i>
                </div>
            </div>

            <div class="song-item">
                <div class="song-index">4</div>
                <div class="song-info">
                    <div class="song-title">再见只是陌生人</div>
                    <div class="song-artist">庄心妍 <span class="quality-badge">杜比</span></div>
                </div>
                <div class="song-actions">
                    <i class="far fa-heart"></i>
                    <i class="fas fa-play"></i>
                    <i class="fas fa-ellipsis-v"></i>
                </div>
            </div>

            <div class="song-item">
                <div class="song-index">5</div>
                <div class="song-info">
                    <div class="song-title">唯一</div>
                    <div class="song-artist">G.E.M. 邓紫棋 <span class="vip-badge">VIP</span> <span class="quality-badge">臻品母带</span></div>
                </div>
                <div class="song-actions">
                    <i class="far fa-heart"></i>
                    <i class="fas fa-play"></i>
                    <i class="fas fa-ellipsis-v"></i>
                </div>
            </div>
        </div>

        <!-- 底部控制区域容器 -->
        <div class="bottom-controls-container">
            <!-- 底部播放条 -->
            <div class="bottom-player">
                <div class="mini-player">
                    <div class="mini-cover">
                        <img src="images/mini-cover.svg" alt="走在冷雨中">
                    </div>
                    <div class="mini-info">
                        <div class="mini-title">走在冷雨中 (粤语版) - 车厘子</div>
                    </div>
                    <div class="mini-controls">
                        <i class="fas fa-play"></i>
                        <i class="fas fa-bars"></i>
                    </div>
                </div>
            </div>

            <!-- 底部导航（在详情页不可见，但保持DOM结构一致） -->
            <div class="bottom-nav">
                <div class="nav-item">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-play-circle"></i>
                    <span>直播</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-search"></i>
                    <span>搜索</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-comments"></i>
                    <span>社区</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>
</html>
